<template>
  <el-tooltip placement="top">
    <template #content>列设置</template>
    <div class="cursor-pointer table-toolbar-right-icon">
      <el-popover placement="bottom-end" trigger="click" :width="250">
        <template #reference>
          <i class="iconfont icon-shezhi1 icon18"></i>
        </template>
        <div>
          <div class="table-toolbar-inner-popover-title">
            <el-checkbox
              size="mini"
              v-model="checkAll"
              @update:checked="onCheckAll"
              label="列展示"
            ></el-checkbox>
            <el-checkbox
              size="mini"
              v-model="selection"
              @update:checked="onSelection"
              label="勾选列"
            ></el-checkbox>
            <div class="btn cursor-pointer" @click="resetColumns">重置</div>
          </div>
          <div class="table-toolbar-inner">
            <el-checkbox-group v-model="checkList" @cahnge="onChange">
              <Draggable v-model="columnsList" animation="300" item-key="key" @end="draggableEnd">
                <template #item="{ element }">
                  <div class="table-toolbar-inner-checkbox">
                    <span class="drag-icon">
                      <i class="iconfont icon-move"></i>
                    </span>
                    <el-checkbox v-model="element.key" size="mini" :label="element.title" />
                    <div class="fixed-item">
                      <el-tooltip placement="bottom">
                        <template #content>固定到左侧</template>
                        <div class="cursor-pointer">
                          <i
                            class="iconfont icon-vertical-left"
                            :color="element.fixed === 'left' ? '#2080f0' : undefined"
                            @click="fixedColumn(element, 'right')"
                          ></i>
                        </div>
                      </el-tooltip>
                      <el-divider direction="vertical"></el-divider>
                      <el-tooltip placement="bottom">
                        <template #content>固定到右侧</template>
                        <div class="cursor-pointer">
                          <i
                            class="iconfont icon-vertical-right"
                            :color="element.fixed === 'right' ? '#2080f0' : undefined"
                            @click="fixedColumn(element, 'right')"
                          ></i>
                        </div>
                      </el-tooltip>
                    </div>
                  </div>
                </template>
              </Draggable>
            </el-checkbox-group>
          </div>
        </div>
      </el-popover>
    </div>
  </el-tooltip>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import Draggable from 'vuedraggable';

const checkAll = ref();
const selection = ref();
const checkList = ref([]);
const columnsList = [
	{
		key: 1,
		title: '你好',
	},
	{
		key: 2,
		title: '你好',
	},
	{
		key: 3,
		title: '你好',
	},
];
const resetColumns = () => {};
const onSelection = () => {};
const onCheckAll = () => {};
const onChange = () => {};
const draggableEnd = () => {};
const fixedColumn = (element: HTMLDivElement, string) => {};
</script>
<style lang="scss" scoped>
.table-toolbar {
	&-inner-popover-title {
		padding-bottom: 12px;
		display: flex;
		justify-content: space-around;
		border-bottom: 1px solid rgb(239, 239, 245);
		.btn {
			line-height: 28px;
			min-width: 60px;
			text-align: right;
			color: #2080f0;
			:hover {
				color: #4098fc;
			}
		}
	}

	&-right {
		&-icon {
			margin-left: 12px;
			font-size: 14px;
			cursor: pointer;
			:hover {
				color: #1890ff;
			}
		}
	}
}

.table-toolbar-inner {
	.iconfont {
		font-size: 14px;
		color: #000;
	}
	&-checkbox {
		display: flex;
		align-items: center;
		padding: 5px 0px;

		&:hover {
			background: #e6f7ff;
		}

		.drag-icon {
			display: inline-flex;
			margin-right: 8px;
			cursor: move;
		}

		.fixed-item {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-left: auto;
			font-size: 14px;
		}

	}
}
</style>
